<template>
	<view class="list">
		<view class="item" v-for="(item, index) in data" :key="index" @click="onItemClick(item)">
			<image class="img" :src="item.listImage"></image>
			<wxc-eclip class="title" :line="1">{{ item.title }}</wxc-eclip>
			<wxc-eclip class="tips" :line="2">{{ item.otherTitle }}</wxc-eclip>
			<view class="price">
				<text class="price-unit">￥</text>
				<text class="price-value">{{item.sellingPrice}}</text>
				<text class="price-unit">起</text>
			</view>
		</view>
		
		<!-- <view v-if="isEmpty" style="display: flex;justify-content: center;align-items: center;width: 100%;height: auto;">
			<image style="width:440upx;height:395upx;margin-top:42upx;margin-bottom:42upx;align-self:center;" src="/static/img/bg_no_data.png"></image>
		</view> -->
		<view class="data-tips" v-if="isNoMore && data.length > 0" style="text-align: center;padding: 20upx 0;">
			<!-- <view style="background-color: #DDDDDD;width: 120upx;height: 1px;"></view> -->
			<text class="font-r" style="font-size:24upx;color:#464646;margin-left:26upx;margin-right:26upx;">没有更多数据啦~</text>
			<!-- <view style="background-color: #DDDDDD;width: 120upx;height: 1px;"></view> -->
		</view>
	</view>
</template>

<script>
import wxcEclip from '@/components/custom/wxc-elip.vue';

var currentPage = 1;
export default {
	components: {
		wxcEclip
	},
	data() {
		return {
			title: '',
			data: [],
			ebusinessType:"",
			isNoMore: false,
			isEmpty: false
		};
	},
	onLoad: function(option) {
		this.title = option.title || '购物';
		this.ebusinessType = option.ebusinessType;
		
		currentPage = 1;
		this.loadData(this.ebusinessType);
	},
	onShow: function() {
		//#ifdef H5
		document.title = this.title;
		//#endif
		//#ifndef H5
		uni.setNavigationBarTitle({
			title: this.title
		});
		//#endif
	},
	onReachBottom: function() {
		if (!this.isNoMore) {
			this.loadData(this.ebusinessType);
		}
	},
	methods: {
		onItemClick: function(item) {
			console.log(item);
			uni.navigateTo({
				url: '/pages/shopping_new/shoppingdetail?item='+encodeURIComponent(JSON.stringify(item))+'&id='+item.id,
				animationType: 'pop-in',
				animationDuration: 200
			});
		},
		loadData:function(ebusinessType){
			uni.showLoading({
				title:"正在加载...",
				mask:true
			})
			var params = {
				pageSize: 10,
				pageIndex:currentPage,
				ebusinessType:ebusinessType
			};
			this.$postApi(this.$path.GET_NEW_COMMODITY_LIST, params).then(res => {
				uni.hideLoading();
				console.log("返回的参数",res.data)
				if (res.data.success) {
					var goods = this.data.concat(res.data.data.list);
					var isNoMore = false;
					var isEmpty = false;
					console.log(res.data.data.total,this.data)
					if (goods.length == 0 || res.data.success == false) {
						isEmpty = true;
						console.log("1111111111111",isEmpty)
					} else if (res.data.data.total == goods.length) {
						isNoMore = true;
					}
					currentPage++;
								
					this.data = goods;
					this.isEmpty = isEmpty;
					this.isNoMore = isNoMore;
					console.log(currentPage)
				}else{
					this.isEmpty = true;
				}
				
			},
				currentPage,
				20
			)
			// var that = this;
			// this.pub.loadProductByCategoryId(
			// 	this.ebusinessType,
			// 	function(data) {
			// 		
			// 	},
			// 	currentPage,
			// 	20
			// );
		}
	}
};
</script>

<style scoped>
.shoppinglist {
	background: #fcfcfc;
}

.list {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: auto;
	box-sizing: border-box;
	padding: 0upx 24upx 0upx 24upx;
}

.list .item {
	width: 100%;
	height: 284upx;
	box-sizing: border-box;
	border-bottom: 1upx solid #e6e6e6;
	padding: 24upx 0upx 24upx 0upx;
	position: relative;
}

.list .item .img {
	width: 274upx;
	height: 235upx;
	border-radius: 6upx;
}

.list .item .title {
	position: absolute;
	left: 295upx;
	top: 49upx;
	width: 402upx;
	height: auto;
	font-size: 38upx;
	line-height: 40upx;
	font-weight: bold;
	letter-spacing: 0px;
	color: #333333;
}

.list .item .tips {
	position: absolute;
	left: 295upx;
	top: 102upx;
	width: 402upx;
	height: auto;
	font-size: 28upx;
	font-weight: medium;
	letter-spacing: 0px;
	color: #999999;
}

.list .item .price{
	position: absolute;
	display: flex;
	flex-direction: row;
	align-items: baseline;
	left: 295upx;
	bottom:38upx;
}
.list .item .price-unit{
	font-size: 22upx;
	font-weight: medium;
	line-height: 22upx;
	letter-spacing: -3px;
	color: #ff4d1d;
}
.list .item .price-value{
	font-size: 42upx;
	line-height: 42upx;
	font-weight: bold;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #ff4d1d;
}

</style>
